<template>
 <div>
  <div class="container">
    <el-upload
      action="http://119.91.150.211:8080/heimamm/public/uploads"
      name="image"
      :on-success="onSuccess"
      :show-file-list="false"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      >
      <i v-if="!value" class="el-icon-plus"></i>
      <img v-else :src="getImgUrl" width="100px" style="border-radius:30%"/>
    </el-upload>

    <i v-if="value" class="el-icon-zoom-in" @click="(dialogVisible=true)"></i>
    <i v-if="value" class="el-icon-delete" @click="deletePortrait"></i>
  </div>
  <!-- list-type="picture-card" -->

  <!-- 预览框 -->
  <el-dialog :visible.sync="dialogVisible" width="300px" append-to-body>
    <img width="100%" :src="getImgUrl" alt="">
  </el-dialog>
 </div>
</template>

<script>
export default {
  name: 'uploadImage',
  props: {
    value: {
      require: true,
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dialogVisible: false
    // ----------- above are fixed ----------- //
    }
  },
  methods: {
    onSuccess (response, file, fileList) {
      this.$emit('input', response.data.file_path)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogVisible = true
    },
    // ----------- above are fixed ----------- //

    //删除图片
    deletePortrait() {
      this.$confirm('确认要清空图片吗？')
        .then(()=> {
          this.$emit('input', '')
      })
    }
  },
  computed: {
    getImgUrl() {
      return process.env.VUE_APP_TARGET_URL + '/public/' + this.value
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  width: 100px;
  height: 100px;
  border-radius: 30%;
  border: 1px dashed #c3c3c3c9;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .el-icon-plus{
  padding: 40px;
  border-radius: 30%;
  }
  &:hover{
    .el-icon-zoom-in, .el-icon-delete{
      padding: 2px;
      border-radius: 30%;
      color: #d4d4d4;
      background-color: #8b8b8b8b;
      display: block;
      &:hover{
      color: #8b8b8b;
      background-color: #d4d4d4d4;
      }
    }
  }

  .el-icon-zoom-in, .el-icon-delete{
    position: absolute;
    top: 10%;
    right: 35%;
    cursor: pointer;
    display: none;
  }
  .el-icon-delete{
    right: 10%;
  }
}

::v-deep .el-dialog__header{
    padding: 5px !important;
}

</style>
